import { Component, PropsWithChildren, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, Input, Textarea} from '@tarojs/components'
import { AtButton, AtInput,AtTextarea, AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
export default class PageView extends Component {
  constructor(props: any) {
    super(props)
    this.state = {
      value : '',
      url: ''
    }
  }

  componentDidMount () {

  }
  handleChange(value) {
    this.setState({
      value:value,
      url:this.state.url
    })
  }
  handleClick(mvalue){
    const params = {
      url: "https://tbxiaobai.com/fastapi/fastapi/qrone",
      data: {
          url_img_txt: mvalue
      },
      method: "POST",
      header: {
        "content-type": "application/json"
      },
      success: (data) => {
        console.log(data)
        console.log(data.data.url)
        this.setState({
          value: data.data.value,
          url: data.data.url
        })
      },
          fail: (data) => {
            console.log(data)
          }};
          Taro.request(params)
    }
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }
  render() {
    return (
      <View className='mainView'>
        <Text className='textCss'>百变QR码</Text>
        <View className='at-icon at-icon-bookmark' style="color:#115534"></View>
      <AtTextarea
      style="font-color: #000"
      // autoFocus
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
        maxLength={200}
        placeholder='请输入文字或网址转换成二维码'
      />
      <AtButton type='primary' style="border-radius: 18px;" onClick={() => this.handleClick(this.state.value)}>ok</AtButton>
      <Image
        style={{width:"50vw", height: "45vh", position: "relative", textAlign: "center"}}
        mode='heightFix'
        lazyload
        src={this.state.url}
        onCLick={()=>{
          Taro.previewImage({
            urls: [this.state.url]
          })
        }}
        />
      </View>
    )
  }
}
